<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="doctorParams.id?'修改医生':'添加医生'"
    width="600"
    center
    @close="closeDialog"
    top="1vh"
    @open="openDialog"
  >
    <el-form
      :model="doctorParams"
      class="dialog-form"
      label-width="100px"
      :rules="rules"
      ref="form"
    >
      <el-divider content-position="left">基本信息</el-divider>
      <el-form-item label="医生姓名:" prop="name">
        <el-input
          v-model="doctorParams.name"
          placeholder="请输入医生姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="医生性别:" prop="sex">
        <el-radio-group v-model="doctorParams.sex">
          <el-radio value="男" size="small" border> 男生 </el-radio>
          <el-radio value="女" size="small" border>女生</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="医生年龄:" prop="age">
        <el-input-number :min="18" :max="80" v-model="doctorParams.age" />
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input
          placeholder="请输入手机号"
          v-model="doctorParams.phone"
          style="width: 60%"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否在职:" prop="isAutonym">
        <el-radio-group v-model="doctorParams.isAutonym">
          <el-radio :value=1 size="small" border>在职</el-radio>
          <el-radio :value=2 size="small" border>离职</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-divider content-position="left">科室信息</el-divider>
      <el-form-item label="所属科室:" prop="depart">
        <el-select
          placeholder="请选择科室"
          v-model="doctorParams.depart"
          @change="changeDepart"
        >
          <el-option
            :label="item.DepartName"
            :value="item._id"
            v-for="item in departList"
            :key="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级科室:" prop="TweDepart">
        <el-select
          placeholder="请选择二级科室"
          v-model="doctorParams.TweDepart"
        >
          <el-option
            :label="item"
            :value="item"
            v-for="item in TweDepartList[0]?.TwoDepart"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-divider content-position="left">职位信息</el-divider>
      <el-form-item label="医生职位" prop="job">
        <el-select v-model="doctorParams.job" placeholder="请选择职位">
          <el-option
            :label="item.jName"
            :value="item._id"
            v-for="item in jobList"
            :key="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-divider content-position="left">头像信息</el-divider>
      <el-form-item label="医生头像:" prop="photo">
        <el-upload
          class="avatar-uploader"
          action="http://121.40.96.76:3000/api/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="doctorParams.photo"
            :src="doctorParams.photo"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="AddOrUpdateDoctor"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, reactive, computed } from "vue";
import { getDepartMentListAPI } from "@/api/departMent";
import { AddOrUpdateDoctorAPI , GetDoctorDetailAPI } from "@/api/user";
import { getJobListAPI } from "@/api/job";
import { ElMessage } from "element-plus";
defineOptions({
  name: "AddDoctor",
});
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  getDoctorList: {
    type: Function,
    default: () => {},
  },
  id: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:modelValue","changeId"]);
let centerDialogVisible = ref(props.modelValue);
let doctorParams = reactive({
  name: "",
  sex: "男",
  age: 18,
  phone: "",
  photo: "",
  depart: "",
  TweDepart: "",
  job: "",
  isAutonym: 1,
});
let rules = reactive({
  name: [
    { required: true, message: "请输入医生姓名", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  sex: [{ required: true, message: "请选择医生性别", trigger: "change" }],
  age: [{ required: true, message: "请输入医生年龄", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" },
  ],
  photo: [{ required: true, message: "请上传医生头像", trigger: "change" }],
  depart: [{ required: true, message: "请选择科室", trigger: "change" }],
  TweDepart: [{ required: true, message: "请选择二级科室", trigger: "change" }],
  job: [{ required: true, message: "请选择医生职位", trigger: "change" }],
  isAutonym: [{ required: true, message: "请选择是否在职", trigger: "change" }],
});
let jobList = ref([]);
let form = ref(null);
let departList = ref([]);
watch(
  () => props.modelValue,
  (newValue) => {
    centerDialogVisible.value = newValue;
  }
);
watch(
  () => props.id,
  (newValue) => {
    doctorParams.id = newValue;
  }
);
const TweDepartList = computed(() => {
  return departList.value.filter((item) => item._id == doctorParams.depart);
});
const changeDepart = () => {
  doctorParams.TweDepart = "";
};
const openDialog = () => {
  
 if(doctorParams.id) {
  getDoctorDetail()
 }
  getDepartList();
  getJobList();
};
const getDepartList = async () => {
  let result = await getDepartMentListAPI({ pageNo: 1, pageSize: 100 });
  departList.value = result.data;
};
const getJobList = async () => {
  let result = await getJobListAPI(1, 100);
  console.log(result);
  jobList.value = result.data;
};
const closeDialog = () => {
  emits("update:modelValue", false);
  Object.assign(doctorParams, {
    name: "",
    sex: "男",
    age: 18,
    phone: "",
    photo: "",
    depart: "",
    TweDepart: "",
    job: "",
    isAutonym: 1,
  });
  emits("changeId","");
  
  form.value.resetFields();
};
const getDoctorDetail = async ()=>{
  let result = await GetDoctorDetailAPI(props.id)
 doctorParams.name = result.data.name
 doctorParams.sex = result.data.sex
 doctorParams.age = result.data.age
 doctorParams.phone = result.data.phone
 doctorParams.photo = result.data.photo
 doctorParams.depart = result.data.depart._id
 doctorParams.TweDepart = result.data.TweDepart
 doctorParams.job = result.data.job._id
 doctorParams.isAutonym = result.data.isAutonym

}
const handleAvatarSuccess = (res, file) => {
  doctorParams.photo = res.data;
};
const beforeAvatarUpload = (file) => {
  //判断类型是否正确
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error("上传头像图片只能是 JPG 格式!");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("上传头像图片大小不能超过 2MB!");
    return false;
  }
};
const AddOrUpdateDoctor = async () => {
  await form.value.validate();
  await AddOrUpdateDoctorAPI(doctorParams);
  if (doctorParams.id) {
    ElMessage.success("修改成功");
  } else {
    ElMessage.success("添加成功");
  }
  closeDialog();
  props.getDoctorList();
};
</script>

<style lang="scss" scoped>
.dialog-form {
  padding: 0px 30px;
  :deep(.el-radio) {
    margin-right: 10px;
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
